<template>
  <div id="wrap" :style="contentStyleObj">
    <el-container >
      <el-aside width="auto" style="background-color: rgb(238, 241, 246);" >  <!--左侧导航栏-->
        <div style="height:  100%;position: fixed">
          <el-menu  :default-active="defaultactive" class="el-menu-vertical-demo" @select="handleSelect" @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#304156"
            :router="true">
            <el-submenu :index="item.path" v-for="item in routers" :key="item.name">
              <template slot="title">
                <span slot="title">{{item.name}}</span>
              </template>
              <el-menu-item :index="val.path" v-for="val in item.son" :key="val.name" :class="[isActive ? yuanClass : '']" >
                {{val.name}}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <!--左侧导航栏end-->
      </el-aside>
      <el-container>
        <el-header style="" id="test2">

              <!--头部面包削-->
              <div style="float: left;">
                <el-button style="border: 0px;background: white" :style="{ display: i1 }" @click="i1click()">
                  <i class="el-icon-s-fold" style="font-size: 25px; color: black"></i>
                </el-button>
                <el-button style="border: 0px;background: white" :style="{ display: i2 }" @click="i2click()">
                  <i class="el-icon-s-unfold" style="font-size: 25px; color: black"></i>
                </el-button>
              </div>
              <div style="float: left;margin-top: 1%">
                <el-breadcrumb separator="/" v-if="bcparent!=''">
                  <el-breadcrumb-item>{{ bcparent }}</el-breadcrumb-item>
                  <el-breadcrumb-item>{{ bcson }}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              <!--头部面包削end-->
              <div class="demo-basic--circle" >
                <div  style="margin-right: 1%">
                  <el-avatar shape="square" style="margin-top: 8px" :size="45" :src="squareUrl"></el-avatar>
                    <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                </div>
              </div>

        </el-header>
        <el-main style="margin-left: 10%" id="test1">
          <div >
            <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="changeMenu">
              <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
              >
                {{item.content}}
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--标签页end-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
    export default {
        name: "backstageManage",
        data() {
          return {
            // 左侧导航栏相关数据----start
            contentStyleObj:{
              height:''
            },
            isCollapse: false,
            i1:'',
            i2:'none',
            defaultactive:'',
            isActive:true,
            squareUrl: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
            yuanClass:'yuan',
            routers:[
              // {
              //   'name':'常用功能',
              //   'path': "/index/home",
              //   'son':[
              //     {
              //       'name':'课程订单',
              //       'path': "/index/dingdan",
              //     }
              //   ]
              // }
            ],
            // 左侧导航栏相关数据----end

            //标签页相关数据----start
            editableTabsValue: '1',
            editableTabs: [
              {title: '首页',
              name: '0',
              content: ''
            },
              // {
            //   title: 'Tab 2',
            //   name: '2',
            //   content: 'Tab 2 content'
            // }
              ],
            tabIndex: 2,
            //标签页相关数据----end

            //面包削
            bcparent: "",
            bcson: "",
            //面包削end
            tableData1:"",
            tableTotal:'',
            cpage:{
              current :1,
              size:10,
              id:'',
            },
            id:sessionStorage.getItem("admin"),
          };
      },
        methods: {
          // 左侧导航栏相关数据----start
          quit(){
            window.sessionStorage.clear();
            this.$router.push({path: '/blogin'});
          },
          getHeight(){
            this.contentStyleObj.height=window.innerHeight+'px';
          },
          handleOpen(key, keyPath) {

          },
          handleClose(key, keyPath) {

          },
          i1click(){
            this.isCollapse = true;
            this.i2 = '';
            this.i1 = 'none';
            document.getElementById("test2").style.marginLeft= "1%";
            document.getElementById("test1").style.marginLeft= "2%";
          },
          i2click(){
            this.i1 = '';
            this.i2 = 'none';
            this.isCollapse = false;
            document.getElementById("test2").style.marginLeft= "9.5%";
            document.getElementById("test1").style.marginLeft= "10%";
          },
          // 左侧导航栏相关方法----end

          //标签页相关方法
          removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
              tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                  let nextTab = tabs[index + 1] || tabs[index - 1];
                  if (nextTab) {
                    activeName = nextTab.name;
                    this.changeMenu(nextTab, null)
                  }
                }
              });
            }
            this.editableTabsValue = activeName;
            if (this.editableTabs.length === 1 && this.editableTabs[0].name !== "1") {
              this.bcparent = "";
              this.bcson = "";
            } else {
              this.showBreadcrumbs(activeName);
            }
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            /**
             * 删除完最后一个 将首页添加上
             */
            if (this.editableTabs.length === 0) {
              this.editableTabs = [
                {
                  title: '首页',
                  name: '0',
                  content: ''
                }
              ]
            }
          },
        async  addTab(key) {
           console.log(key);
            let name = key.pid +"";
            let title = key.pname
            console.log(name);
            let status = 0;
            this.bcparent ='';
            this.bcson ='';
            this.editableTabs.some(item =>{
              if( item.name == name ){
                this.editableTabsValue = name;
                status = 1;
                return true;
              }
            });
            if(status == 0){
              this.editableTabsValue = name;
              let t1 = new Object();
              t1.title = "专区课程（"+title+"）";
              t1.name = name;
              this.editableTabs.push(t1);
            }
            this.cpage.current =1;
           // this.cpage.size = 2;
          await  this.getCourseByPid(key.pid);
          // this.$router.push({name:"zonecourse",query:{pid1:key.pid,data1:this.tableData1,total:this.tableTotal,status1:true}});

          },
          handleSelect(key, keyPath){
            let tar = this.showBreadcrumbs(key);
            //console.log("!!!"+tar);
           // console.log(this.editableTabs);
            let status = 0;
            this.editableTabs.some(item =>{
              if( item.name == key ){
                this.editableTabsValue = key;
                status = 1;
                return true;
              }
            });
            //console.log(status);
            if(status == 0){
              this.editableTabsValue = key;
              let t1 = new Object();
              t1.title = tar;
              t1.name = key;
              this.editableTabs.push(t1);
            }
          },
          showBreadcrumbs(value) {
            //console.log("---" + value);
            let bcparent = "";
            let bcson = "";
            // let tabtarget = "";
            this.routers.some(function (item, idx) {
              //console.log(JSON.stringify(item) + "---" + idx);
              item.son.some(function (elem, index) {
                //console.log(JSON.stringify(elem) + "---" + index);
                // 将路径存放到  this.editableTabs 中
                if (elem.path == value) {
                  bcparent = item.name;
                  bcson = elem.name;
                  return true;
                }
              });
              if (bcparent !== "") {
                return true;
              }
            });
            this.bcparent = bcparent;
            this.bcson = bcson;
            //console.log(this.bcparent + "--------" + this.bcson);
            return bcson;
          },
          async changeMenu(tab, event) {

            this.showBreadcrumbs(tab.name);
            // console.log("!!!!@@!!!");
            // console.log(tab);

            let title = tab.title || tab.label;
            // if(this.editableTabs.length === 2){
            //   title = tab.title;
            // }else
            //   title = tab.label;
            //console.log(title);
            if(title.indexOf('专区课程')!= -1){
              this.cpage.current = 1;
              //this.cpage.size = 2;
            await this.getCourseByPid(tab.name);
               console.log(this.tableData1);
           // this.$router.push({name:"zonecourse",query:{pid1:tab.name,data1:this.tableData1,total:this.tableTotal,status1:true}});
            }else {
              //console.log(tab);
              //console.log("bbb--"+tab.name, event);
              this.defaultactive = tab.name;
              if(tab.name === "0"){
                this.$router.push({path:"/l2"});
              }
              else
                this.$router.push({path:this.defaultactive});
            }
          },
          async getCourseByPid(pid){
            this.cpage.id = pid;
            //console.log(this.cpage);
            await this.$axios.post("/zonecourse/zoneCourse/selectOne",qs.stringify(this.cpage)).then(res=>{
              //alert(JSON.stringify(res.data));
              this.tableData1 = res.data.records;
              this.tableTotal = res.data.total;
              this.$router.push({name:"zonecourse",query:{pid1:pid,data1:this.tableData1,total:this.tableTotal,curr:this.cpage.current
              ,size:this.cpage.size}});
            }),function () {
              alert("失败!")
            }
          },

        },
      created(){
        this.$router.push({path:"/l2"});
        window.addEventListener('resize', this.getHeight);
        this.getHeight();
        this.$axios.get("usermanage/t-menu/menuSon1?roleId="+this.id).then(res=>{
          console.log(res.data);
          let menus = res.data;
          let menu = [];
          menus.forEach(function (item,index) {
           // console.log(index,item);
            if(item.tmenu.mpid == 0) {
              let pid = item.tmenu.mid;
              let son = [];
              menus.forEach(function (item2) {
                  if(pid == item2.tmenu.mpid){
                    son.push({"name":item2.tmenu.mname,"path":item2.tmenu.murl},)
                    //console.log(item2);
                    //console.log(son);
                  }
              })
              menu.push({"name":item.tmenu.mname,"son":son,"path":item.tmenu.murl});
            }
          });
          this.routers = menu;
        }),function () {
          alert("失败");
        };
      },
      destroyed(){
        window.removeEventListener('resize', this.getHeight)
      },
      mounted() {
       let _this = this;//很关键是要把父路由的vue实例赋给_this
        this.$bus.$on("addDpm", function(res) {
          _this.addTab(res);
        });
        this.$bus.$on("page", function(res) {
          //alert(JSON.stringify(res));
          _this.cpage.current = res.current;
          _this.cpage.size = res.size;
          _this.cpage.title = res.title;
          //alert(JSON.stringify(_this.cpage));
          _this.getCourseByPid(res.id);
          //alert(JSON.stringify(_this.tableData1));
          // _this.$router.push({name:"zonecourse",query:{pid1:res.id,data1:_this.tableData1,total:_this.tableTotal,status1:true}});

        });
      },
    }
</script>

<style scoped>

</style>

<style>
  html,body{height:100%; margin:0;}
  #test2{
    text-align: right; font-size: 12px;padding: 0px;border-bottom: 1px solid;margin-left: 9.5%
  }
  #wrap{
    height: 100%;
  }
   /*左侧导航栏相关样式----start*/
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100%;
  }
  .el-menu-vertical-demo {
    width: 50px;
    min-height: 100%;
  }
  .el-submenu__title{
    color: #BFCBD9;
  }
  .el-menu-item{
    color: #BFCBD9;
  }
  .yuan{
    background-color: #1F2D3D !important;
  }
  .el-menu-item:hover{
    background-color:#001528 !important;
  }
  /*左侧导航栏相关样式----end*/
</style>
